
import { useNavigate } from 'react-router-dom';
import { Button, Form, Input, Space, Table, PageHeader, Select, Row, Col, Drawer, Switch, Modal } from 'antd';
import { PlusOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { useEffect, useState } from 'react';
import './index.scss'

import moment from 'moment'

import { getUserLable, getLable, delUserLable } from '../../../../api/WL/userLable'

const { Option } = Select;

//面包屑
const routes = [
    {
        path: '/',
        breadcrumbName: '用户管理',
    },
    {
        path: '/home/user/free-member',
        breadcrumbName: '用户标签',
    },

];

const UserLable = () => {
    const navigate = useNavigate();
    const [data, setData] = useState([]);
    const [lableData, setLableData] = useState([])

    //初始化用户标签数据
    const getUserLableData = () => {
        getUserLable().then((res) => {
            console.log(res);
            if (res.code === 200) {
                let _data = res.data;
                if (_data.length > 0) {
                    _data.forEach(v => {
                        v.lastUpdateTime = moment(v.lastUpdateTime).format('YYYY-MM-DD mm:ss')
                    });
                }
                setData(_data);
            }
        })
    }
    useEffect(() => {
        getUserLableData()
    }, [])

    //开关
    const onChange = (checked) => {
        console.log(`switch to ${checked}`);
    };

    //抽屉
    const [visible, setVisible] = useState(false);

    const showDrawer = (v) => {
        // console.log(v);
        setVisible(true);
        getLable(v).then((res) => {
            console.log(res);
            if (res.code === 200) {
                let _lableData = res.data[0];
                _lableData.rencentBuyTime = moment(_lableData.rencentBuyTime).format('YYYY-MM-DD mm:ss');
                setLableData(_lableData);
            }
        })
    };

    const onClose = () => {
        setVisible(false);
    };
    //搜索
    //搜索的表单
    const [form] = Form.useForm();

    const onFinish = (values) => {
        console.log('Success:', values);
        let form = values;
        getUserLable(form).then((a) => {
            console.log(a);
            if (a.code === 200) {
                let _data = a.data;
                if (_data.length > 0) {
                    _data.forEach(v => {
                        v.lastUpdateTime = moment(v.lastUpdateTime).format('YYYY-MM-DD mm:ss')
                    });
                }
                setData(_data);
            }
        })
    };

    //编辑
    const mod = (value) => {
        navigate('/home/user/editUserLable', { state: value })
    }
    //删除
    const { confirm } = Modal;
    const del = (v) => {
        console.log(v);
        confirm({
            title: '删除标签',
            icon: <ExclamationCircleOutlined />,
            content: '确定删除此标签信息吗？',
            okText: '确认',
            cancelText: '取消',
            centered: true,

            onOk() {
                console.log('OK');
                delUserLable(v).then((res) => {
                    console.log(res);
                    if (res.code === 200) {
                        getUserLableData()
                    }
                })
            },

            onCancel() {
                console.log('Cancel');
            },
        });
    };
    //新增
    const add = () => {
        navigate('/home/user/addUserLable')
    }
    //表格
    const columns = [
        {
            title: '标签名称',
            dataIndex: 'labelName',
            key: 'labelName',
        },
        {
            title: '用户数量',
            dataIndex: 'userNum',
            key: 'userNum',
        },
        {
            title: '标签类型',
            key: 'labelType',
            render: (_, record) => (
                <Button type='text'>{record.labelType === 0 ? '自动标签' : '手动标签'}</Button>
            ),
        },
        {
            title: '标签条件',
            key: 'tags',
            render: (_, record) => (
                <Space size="middle">
                    <Button type='link' onClick={() => showDrawer(record.labelId)}>查看</Button>
                </Space>
            ),
        },
        {
            title: '权益状态',
            key: 'labelState',
            render: (_, record) => (
                <Space size="middle">
                    < Switch defaultChecked onChange={onChange} checked={record.labelState === '1' ? true : false} />
                </Space>
            ),
        },
        {
            title: '最后修改时间',
            key: 'lastUpdateTime',
            dataIndex: 'lastUpdateTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_, record) => (
                <Space size="middle">
                    <a onClick={() => mod(record)}>编辑</a>
                    <a onClick={() => del(record.labelId)}>删除</a>
                </Space>
            ),
        },
    ];

    const showTotal = (total) => `数量 ${total} 条`;

    return <div className='MemberInterests'>
        {/* 头部 */}
        <div className="header">
            <PageHeader
                className="site-page-header"
                title="用户标签"
                breadcrumb={{
                    routes,
                }}

            />

            <Form
                form={form}
                name="basic"
                labelCol={{
                    span: 9,
                }}
                wrapperCol={{
                    span: 15,
                }}
                onFinish={onFinish}
                autoComplete="off"
            ><Row>
                    <Col span={8}><Form.Item
                        label="标签类型"
                        name="labelType" >
                        <Select
                            placeholder='请选择标签类型'
                        >
                            <Option value="">全部</Option>
                            <Option value={0}>自动标签</Option>
                            <Option value={1}>手动标签</Option>
                        </Select>
                    </Form.Item></Col>
                    <Col span={8}> <Form.Item
                        label="标签名称"
                        name="labelName"

                    >
                        <Input placeholder="请输入..." />
                    </Form.Item></Col>
                    <Col span={6}>
                        <Form.Item
                            wrapperCol={{
                                offset: 8,
                                span: 16,
                            }}
                            className='btn1'
                        >
                            <Button type="primary" htmlType="submit">
                                查询
                            </Button>
                        </Form.Item>
                    </Col>
                    <Col >
                        <Form.Item
                            wrapperCol={{
                                offset: 7,
                                span: 16,
                            }}
                            className='btn2'
                        >
                            <Button onClick={() => {
                                getUserLableData()
                                return form.resetFields();
                            }}>
                                重置
                            </Button>
                        </Form.Item></Col>
                </Row>
            </Form>
            {/* 以上为头部 */}
        </div>
        {/* 表格 */}
        <div className="content">
            <div className="top">
                <h3>标签列表</h3>
                <Button type="primary" icon={<PlusOutlined />} className='btn3' onClick={add}>新建</Button>
            </div>
            <Table rowKey={(record) => record.labelId} columns={columns} dataSource={data} pagination={{
                total: data.length,
                showTotal: showTotal,
                showSizeChanger: true,
                showQuickJumper: true,
            }} />
            {/* 抽屉 */}
            <Drawer title="标签条件" placement="right" onClose={onClose} visible={visible}>
                <p>标签名称&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.labelName}</span></p>
                <p>标签类型&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.labelType === 0 ? '自动标签' : '手动标签'}</span></p>
                <p>条件设置&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span></span></p>
                <p>最近消费时间&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.rencentBuyTime}</span></p>
                <p>累计消费次数&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.maxBuyNumber}</span></p>
                <p>累计消费金额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.maxBuyMoney}</span></p>
                <p>订单金额&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.maxBuyAverage}</span></p>
                <p>累计获取积分&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<span>{lableData.maxIntegral}</span></p>
            </Drawer>
        </div>
    </div>
}
export default UserLable;